<style scoped>
.main-body{position: fixed; left: 0; top: 0; right: 0; bottom: 0; background: url(../assets/login-ground.jpg) no-repeat, #ffe400; background: url(../assets/login-ground.jpg) no-repeat, -webkit-gradient(linear, 0 0, 0 bottom, from(#ffd100), to(#ffe400)); -webkit-background-size: cover; background-size: cover;}
.login-box{width: 400px; margin: 0 auto;}
.login-logo{color: #fff; font-size: 18px; text-align: center; padding: 20px 0 30px;}
.login-detail{padding: 20px; background-color: #fff; border-radius: 4px;}
.ipt-login{margin-bottom: 20px;}
.fullwidth{width: 100%;}
.auto_login_desc{color: #666;}
.attch_fn,.attch_fn a{color: #999;}
.attch_fn a:hover{text-decoration:underline;}
.auto_login_desc .el-checkbox__input.is-checked+.el-checkbox__label{color: #666;}
</style>

<template>
<div class="main-body">
    <div class="login-box">
        <div class="login-logo">
            <div class="login-logo-name">XXXXXXXXXXX</div>
            <div class="login-logo-meta">aaaaaaaa</div>
        </div>
		
        <div class="login-detail">
            <el-input class="ipt-login" autofocus placeholder="请输入用户名" prefix-icon="el-icon-wsj-yonghu" v-model="username" />
            <el-input class="ipt-login" placeholder="请输入密码" prefix-icon="el-icon-wsj-locksuo" v-model="password" />
            <el-button class="ipt-login fullwidth" :loading="bloading" type="primary" @click="register">{{denlu}}</el-button>
            <div class="yt yt-pj">
                <el-checkbox class="auto_login_desc" v-model="ckb_auto_login">30天内自动登录</el-checkbox>
                <div class="attch_fn">忘记密码 | <router-link to="/register">注册</router-link></div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import ajax from '@/utils/ajax.js'
export default {
    data() {
        return {
            denlu:'登录',
            username: '',
            password: '',
            ckb_auto_login: true,
            bloading: false
        }
    },
    components: {

    },
    mounted() {

    },
    methods: {
        register() {
            var that = this
            var username = that.username
            var password = that.password
            this.bloading = true
            this.$axios.post(this.$api.login,{
                username,
                password
            })
            .then((res)=>{
                if(res.errCode>0){
                    var docCookies=this.$docCookies
                    var config=this.$config
                    docCookies.setItem(config.COOKIEJWTNAME,res.data.jwt,docCookies.addTime({day:config.COOKIETIME}))
                    this.denlu='正在跳转...'
                    this.$router.push({path:'/adm'})
                }else{
                    this.$message.error({
                        message: res.msg,
                        duration: 1500,
                        onClose: function () {
                        that.bloading = false
                        }
                    });
                }
            })
           
          
        }
    }
}
</script>
